<template>
  <div class="field-preview">
    <n-form-item
      :label="field.label || '字段标签'"
      :required="field.required"
    >
      <!-- 单选框 -->
      <n-radio-group
        v-if="field.type === 'radio'"
        :value="null"
        :disabled="true"
      >
        <n-space>
          <n-radio
            v-for="(option, index) in (field.options || ['选项1', '选项2'])"
            :key="index"
            :value="option"
            :disabled="true"
          >
            {{ option || `选项${index + 1}` }}
          </n-radio>
        </n-space>
      </n-radio-group>

      <!-- 多选框 -->
      <n-checkbox-group
        v-else-if="field.type === 'checkbox'"
        :value="[]"
        :disabled="true"
      >
        <n-space>
          <n-checkbox
            v-for="(option, index) in (field.options || ['选项1', '选项2'])"
            :key="index"
            :value="option"
            :disabled="true"
          >
            {{ option || `选项${index + 1}` }}
          </n-checkbox>
        </n-space>
      </n-checkbox-group>

      <!-- 日期选择 -->
      <n-date-picker
        v-else-if="field.type === 'date'"
        :value="null"
        :disabled="true"
        placeholder="请选择日期"
        class="w-full"
      />

      <!-- 数字输入 -->
      <n-input-number
        v-else-if="field.type === 'number'"
        :value="null"
        :disabled="true"
        :min="field.min"
        :max="field.max"
        :placeholder="`请输入${field.label || '数字'}`"
        class="w-full"
      />

      <!-- 文本输入 -->
      <n-input
        v-else
        :value="null"
        :disabled="true"
        :placeholder="`请输入${field.label || '内容'}`"
      />
    </n-form-item>

    <!-- 字段信息提示 -->
    <div class="field-info">
      <n-space size="small">
        <n-tag size="small" type="info">
          {{ fieldTypeLabels[field.type] || field.type }}
        </n-tag>
        <n-tag v-if="field.required" size="small" type="warning">
          必填
        </n-tag>
        <n-tag v-else size="small" type="default">
          选填
        </n-tag>
        <span v-if="field.name" class="field-name">
          字段名: {{ field.name }}
        </span>
      </n-space>
    </div>
  </div>
</template>

<script setup lang="ts">
interface PreconditionField {
  name: string
  label: string
  type: 'radio' | 'checkbox' | 'date' | 'number' | 'text'
  required: boolean
  options?: string[]
  min?: number
  max?: number
}

interface Props {
  field: PreconditionField
}

defineProps<Props>()

// 字段类型标签映射
const fieldTypeLabels: Record<string, string> = {
  radio: '单选框',
  checkbox: '多选框',
  date: '日期选择',
  number: '数字输入',
  text: '文本输入'
}
</script>

<style scoped>
.field-preview {
  width: 100%;
}

.field-info {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e6;
}

.field-name {
  font-size: 12px;
  color: #666;
}
</style>
